<!doctype html>

<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Sakura Blog</title>
<link href="style.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/belatedPNG.js"></script>
<script>
	DD_belatedPNG.fix('*');
</script>
<![endif]-->
<script src="js/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/loopedslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#slider').loopedSlider({
			autoStart: 6000,
			restart: 5000
		});
		
	});
</script> 
</head>

<body>
<div id="bodywrap">
<section id="pagetop">
<p id="siteinfo">
welcome!
</p>
<nav id="sitenav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<!--<li><a href="styles.html">Styles</a></li>-->
<li><a href="contact.html">Contact</a></li>
<li><a href="userLogin.html">login</a></li>

</ul>

</nav>
</section>
<header id="pageheader">
<h1>
Sakura<span>blog</span>
</h1>
<div id="search">

<form action="#">

<div class="searchfield">


<input type="text" name="search" id="s" style="outline: none">

</div>
<div class="searchbtn">
<input type="image" src="images/searchbtn.png" alt="search"style="outline: none">
</div>

</form>

</div>
</header>
<div id="contents">
<section id="main">
<section id="featured">
<h2 class="ftheading">Featured</h2>
<div class="ftwrap">
<div class="ftimg">

  <img src="images/img1.jpg" width="204" height="128" alt="img1" id  = 'categories_img'></div>
  <div class="fttxt">
  <h3 id="categories_name">Featured Content</h3>
  <p id = 'categories_introduce'> </div>
  </div>
</section>
<div id="leftcontainer">
<h2 class="mainheading" id="blog">
 from the blog

</h2>


<div class="wp-pagenavi"id="page">
    <div class="clear"></div>
</div>
</section>
<section id="sidebar">
<div id="sidebarwrap">
<h2>AboutMe</h2>
<p id ='about'></p>
<h2>Categories</h2>
<ul class="categories" id ='categories'>
</ul>
</ul>
</div>
</section>

<div class="clear"></div>
</div>

</div>
<footer id="pagefooter">
<div id="footerwrap">
<div class="copyright">
2010 &copy; Your Copyright Information Goes Here
</div>
</div>
</footer>
<script src="js/model.js"></script>
<script src="js/view.js"></script>
<script src="js/controller.js"></script>
<script>
	$(function() {
        mvc.controller.getCategories();
        mvc.controller.getAbout();
        mvc.controller.getImage();
        mvc.controller.getArticleList()
    });
</script>
</body>
</html>
